import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';

class StoreOpenController extends GetxController {
  late ScrollController scrollController;

  @override
  void onInit() {
    scrollController = ScrollController()..addListener(() {});
    super.onInit();
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }
}

class StoreOpenPage extends GetView<StoreOpenController> {
  const StoreOpenPage({super.key});

  Widget buildBody(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        controller: controller.scrollController,
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 370.0,
            backgroundColor: Colors.white,
            leading: IconButton(
              onPressed: Get.back,
              icon: const Icon(
                CupertinoIcons.chevron_back,
                size: 20,
                color: Colors.white,
              ),
            ),
            systemOverlayStyle: SystemUiOverlayStyle.light,
            flexibleSpace: FlexibleSpaceBar(
              background: ClipPath(
                clipper: _MyCustomClipper(),
                child: Container(
                  height: 370.0,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(254, 70, 1, 1),
                        ColorsUtils.rgba(254, 70, 1, 1)
                      ],
                      stops: const [0, 0, 1, 1],
                      transform: GradientRotation(
                        RadianUtils.angleToRadian(180),
                      ),
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.centerRight,
                        margin: const EdgeInsets.only(top: 100, right: 25),
                        child: Transform.rotate(
                          angle: RadianUtils.angleToRadian(356),
                          child: Text(
                            '小默外卖火热招商中！',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize20,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildMain(BuildContext context) {
    return MediaQuery.removeViewPadding(
      context: context,
      removeBottom: true,
      removeLeft: true,
      removeRight: true,
      removeTop: true,
      child: Material(
        color: Colors.white,
        child: AnnotatedRegion(
          value: SystemUiOverlayStyle.light,
          child: Column(
            children: [
              ClipPath(
                clipper: _MyCustomClipper(),
                child: Container(
                  height: 320.0,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(254, 70, 1, 1),
                        ColorsUtils.rgba(254, 70, 1, 1)
                      ],
                      stops: const [0, 0, 1, 1],
                      transform: GradientRotation(
                        RadianUtils.angleToRadian(180),
                      ),
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                  child: Column(
                    children: [
                      Padding(
                        padding: Get.mediaQuery.padding,
                        child: SizedBox(
                          height: 44,
                          child: Row(
                            children: [
                              Container(
                                width: 40,
                                height: 44,
                                alignment: Alignment.center,
                                child: const Icon(
                                  CupertinoIcons.chevron_back,
                                  size: 20,
                                  color: Colors.white,
                                ),
                              ).onTap(Get.back),
                            ],
                          ),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerRight,
                        margin: const EdgeInsets.only(top: 40, right: 25),
                        child: Transform.rotate(
                          angle: RadianUtils.angleToRadian(356),
                          child: Text(
                            '小默外卖火热招商中！',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize20,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerRight,
                        margin: const EdgeInsets.only(top: 20, right: 25),
                        child: Transform.rotate(
                          angle: RadianUtils.angleToRadian(355),
                          child: Text(
                            '火爆招商',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize72,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerRight,
                        margin: const EdgeInsets.only(top: 20, right: 25),
                        child: Transform.rotate(
                          angle: RadianUtils.angleToRadian(355),
                          child: Text(
                            '某某领域领先的外卖开放平台',
                            style: StylesUtils.textStyle(
                              fontSize: StylesUtils.fontSize20,
                              fontWeight: FontWeight.w700,
                              color: ColorsUtils.rgba(
                                  255, 255, 255, 0.698039215686274),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(
                    top: 30, bottom: 10, left: (Get.width - 315) / 2),
                alignment: Alignment.centerLeft,
                child: Text(
                  '手机号',
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize13,
                    color: ColorsUtils.color7979,
                  ),
                ),
              ),
              Center(
                child: TextField(
                  cursorHeight: 20,
                  cursorWidth: 3,
                  cursorRadius: const Radius.circular(2),
                  cursorColor: HexColor(ColorsUtils.colorFf64),
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize15,
                    color: ColorsUtils.color0000,
                  ),
                  textAlign: TextAlign.left,
                  textAlignVertical: TextAlignVertical.center,
                  textDirection: TextDirection.ltr,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    hintText: '请输入手机号码',
                    hintStyle: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize15,
                      color: ColorsUtils.color9999,
                    ),
                    filled: true,
                    fillColor: ColorsUtils.rgba(247, 247, 247, 1),
                    isDense: true,
                    isCollapsed: true,
                    prefixIconConstraints:
                        const BoxConstraints.expand(height: 50, width: 70),
                    prefixIcon: Container(
                      alignment: Alignment.center,
                      child: Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '+86 ',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize16,
                                color: ColorsUtils.color0000,
                              ),
                            ),
                            WidgetSpan(
                                child: Icon(
                                  CupertinoIcons.chevron_down,
                                  color: HexColor(ColorsUtils.color9999),
                                  size: 14,
                                ),
                                alignment: PlaceholderAlignment.middle),
                          ],
                        ),
                      ),
                    ).onTap(() {}),
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 15, horizontal: 20),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide.none,
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide.none,
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide.none,
                    ),
                    constraints:
                        const BoxConstraints.expand(width: 315, height: 50),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(
                    top: 15, bottom: 10, left: (Get.width - 315) / 2),
                alignment: Alignment.centerLeft,
                child: Text(
                  '验证码',
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize13,
                    color: ColorsUtils.color7979,
                  ),
                ),
              ),
              Center(
                child: TextField(
                  cursorHeight: 20,
                  cursorWidth: 3,
                  cursorRadius: const Radius.circular(2),
                  cursorColor: HexColor(ColorsUtils.colorFf64),
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize15,
                    color: ColorsUtils.color0000,
                  ),
                  textAlign: TextAlign.left,
                  textAlignVertical: TextAlignVertical.center,
                  textDirection: TextDirection.ltr,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    hintText: '请输入验证码',
                    hintStyle: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize15,
                      color: ColorsUtils.color9999,
                    ),
                    filled: true,
                    fillColor: ColorsUtils.rgba(247, 247, 247, 1),
                    isDense: true,
                    isCollapsed: true,
                    suffixIconConstraints:
                        const BoxConstraints.expand(height: 50, width: 105),
                    suffixIcon: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: ColorsUtils.rgba(153, 153, 153, 1),
                        borderRadius: const BorderRadius.only(
                          topRight: Radius.circular(10),
                          bottomRight: Radius.circular(10),
                        ),
                      ),
                      child: Text(
                        '获取验证码',
                        style: StylesUtils.customTextStyle(),
                      ),
                    ).onTap(() {}),
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 15, horizontal: 20),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide.none,
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide.none,
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide.none,
                    ),
                    constraints:
                        const BoxConstraints.expand(width: 315, height: 50),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 30),
                alignment: Alignment.center,
                child: Container(
                  alignment: Alignment.center,
                  constraints:
                      const BoxConstraints.expand(width: 315, height: 50),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    gradient: LinearGradient(
                      colors: [
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(254, 70, 1, 1),
                        ColorsUtils.rgba(254, 70, 1, 1)
                      ],
                      stops: const [0, 0, 1, 1],
                      transform: GradientRotation(
                        RadianUtils.angleToRadian(90),
                      ),
                      end: Alignment.topCenter,
                      begin: Alignment.bottomCenter,
                    ),
                  ),
                  child: Text(
                    '我要开店',
                    style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize16,
                    ),
                  ),
                ).onTap(() {
                  Get.toNamed(Routes.storeMine);
                }),
              ),
              Container(
                margin: const EdgeInsets.only(top: 40),
                alignment: Alignment.center,
                child: Text.rich(
                  TextSpan(
                    children: [
                      WidgetSpan(
                        child: Icon(
                          CupertinoIcons.question_circle,
                          size: 20,
                          color: HexColor(ColorsUtils.color9999),
                        ),
                        alignment: PlaceholderAlignment.middle,
                      ),
                      TextSpan(
                        text: ' 开店帮助',
                        style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color7979,
                        ),
                      ),
                    ],
                  ),
                ).onTap(() {
                  Get.toNamed(Routes.storeHelp);
                }),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return buildMain(context);
  }
}

class _MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(0, size.height);
    path.lineTo(3, size.height - 2);
    path.lineTo(size.width - 3, size.height - 38);
    path.lineTo(size.width, size.height - 40);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}
